<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Shape | GoJS API</title>
	<meta name="description" content="Documentation for GoJS API">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../../assets/css/style.css">
	<link rel="stylesheet" href="../assets/css/main.css">
	<script async src="../assets/js/search.js" id="search-script"></script>
</head>
<body>
<header>
	<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
		<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
			<div class="md:pl-4">
				<a class="text-white hover:text-white no-underline hover:no-underline
				font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html">
				<h1 class="mb-0 p-1 leading-none">GoJS</h1>
				</a>
			</div>
			<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
				<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
					<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
					<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
				</svg>
			</button>
			<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
				<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
					target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
					<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
					target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
				</ul>
			</div>
		</div>
		<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
	</nav>
	<div class="tsd tsd-page-header">
		<div class="tsd-page-toolbar">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="table-wrap">
					<div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" data-base="..">
						<div class="field">
							<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
							<input id="tsd-search-field" type="text" />
						</div>
						<ul class="results">
							<li class="state loading">Preparing search index...</li>
							<li class="state failure">The search index is not available</li>
						</ul>
						<a href="../index.html" class="title">GoJS API</a>
					</div>
					<div class="table-cell" id="tsd-widgets">
						<div id="tsd-filter">
							<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
							<div class="tsd-filter-group">
								<div class="tsd-select" id="tsd-filter-visibility">
									<span class="tsd-select-label">All</span>
									<ul class="tsd-select-list">
										<li data-value="public">Public</li>
										<li data-value="protected">Public/Protected</li>
										<li data-value="private" class="selected">All</li>
									</ul>
								</div>
							</div>
						</div>
						<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
					</div>
				</div>
			</div>
		</div>
		<div class="tsd tsd-page-title">
			<div class="w-full max-w-screen-xl mx-auto px-2">
				<div class="top-copyright">
					<b>GoJS</b>&reg; Diagramming Components<br/>version 2.1.56<br/>by <a href="https://www.nwoods.com/">Northwoods Software&reg;</a>
				</div>
				<div>
					<h1>Class Shape</h1>
				</div>
			</div>
		</div>
	</div>
</header>
<div class="tsd w-full max-w-screen-xl mx-auto pb-4">
	<div class="row px-2 w-full">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>
						<ul class="tsd-hierarchy">
							<li>
								<span class="target">Shape</span>
							</li>
						</ul>
					</li>
				</ul>
			</section>
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<p>A Shape is a <a href="GraphObject.html">GraphObject</a> that shows a geometric figure.
						The <a href="Geometry.html">Geometry</a> determines what is drawn;
						the properties <a href="Shape.html#fill">fill</a> and <a href="Shape.html#stroke">stroke</a>
					(and other stroke properties) determine how it is drawn.</p>
					<p>There are generally two types of shapes: Those that use a custom <a href="Geometry.html">Geometry</a> by setting
						<a href="Shape.html#geometry">Shape.geometry</a>, and those that receive an automatically generated Geometry using the value of
						<a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, or <a href="Shape.html#fromArrow">fromArrow</a>. An explicitly set Geometry always supersedes
					the figure and arrowhead properties.</p>
					<p>Some created Shapes:</p>
					<pre><code class="language-js"><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">$</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">GraphObject</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">make</span><span style="color: #D4D4D4">;  </span><span style="color: #6A9955">// for conciseness in defining GraphObjects</span>

<span style="color: #6A9955">// A shape with the figure set to RoundedRectangle:</span>
<span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">, { </span><span style="color: #9CDCFE">figure:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;RoundedRectangle&quot;</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">fill:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;lightgreen&quot;</span><span style="color: #D4D4D4"> })</span>
<span style="color: #6A9955">// Alternatively:</span>
<span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">, </span><span style="color: #CE9178">&quot;RoundedRectangle&quot;</span><span style="color: #D4D4D4">, { </span><span style="color: #9CDCFE">fill:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;lightgreen&quot;</span><span style="color: #D4D4D4"> })</span>

<span style="color: #6A9955">// A shape with a custom geometry, using geometryString:</span>
<span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">    { </span><span style="color: #9CDCFE">geometry:</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Geometry</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">parse</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">&quot;M120 0 L80 80 0 50z&quot;</span><span style="color: #D4D4D4">) })</span>

<span style="color: #6A9955">// A shape with a custom geometry, using geometryString:</span>
<span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">   { </span><span style="color: #9CDCFE">geometryString:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;F M120 0 L80 80 0 50z&quot;</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">     </span><span style="color: #9CDCFE">fill:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;lightgreen&quot;</span><span style="color: #D4D4D4"> })</span>

<span style="color: #6A9955">// A common link template, using two shapes,</span>
<span style="color: #6A9955">// the first for the link path and the second for the arrowhead</span>
<span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">linkTemplate</span><span style="color: #D4D4D4"> =</span>
<span style="color: #D4D4D4">  </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Link</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">    </span><span style="color: #6A9955">// The first shape in a link is special, its geometry is set by the Link&#039;s routing,</span>
<span style="color: #D4D4D4">    </span><span style="color: #6A9955">// so it does not need a geometry or figure set manually</span>
<span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">      { </span><span style="color: #9CDCFE">strokeWidth:</span><span style="color: #D4D4D4"> </span><span style="color: #B5CEA8">2</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">stroke:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#039;gray&#039;</span><span style="color: #D4D4D4"> }),</span>
<span style="color: #D4D4D4">    </span><span style="color: #DCDCAA">$</span><span style="color: #D4D4D4">(</span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #9CDCFE">Shape</span><span style="color: #D4D4D4">,</span>
<span style="color: #D4D4D4">      { </span><span style="color: #9CDCFE">toArrow:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&quot;Standard&quot;</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">fill:</span><span style="color: #D4D4D4"> </span><span style="color: #CE9178">&#039;gray&#039;</span><span style="color: #D4D4D4">, </span><span style="color: #9CDCFE">stroke:</span><span style="color: #D4D4D4"> </span><span style="color: #569CD6">null</span><span style="color: #D4D4D4"> })</span>
<span style="color: #D4D4D4">  );</span>
</code></pre>
					<p class="box">
						You can see more custom geometry examples and read about geometryString
						on the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page.</a>
						<p>When automatically generating a Shape <a href="Geometry.html">Geometry</a>, the value of <a href="Shape.html#toArrow">toArrow</a> takes precedence,
							then <a href="Shape.html#fromArrow">fromArrow</a>, then <a href="Shape.html#figure">figure</a>. If the value of <a href="Shape.html#toArrow">toArrow</a> or <a href="Shape.html#fromArrow">fromArrow</a> is &quot;None&quot;
						then it is ignored, and the &quot;None&quot; value of <a href="Shape.html#figure">figure</a> is identical to &quot;Rectangle&quot;.</p>
						<p>All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.
							You can define your own named figures by calling the static function <a href="Shape.html#static-defineFigureGenerator">Shape.defineFigureGenerator</a>.
						Get a <a href="Map.html">Map</a> of named figures by calling the static function <a href="Shape.html#static-getFigureGenerators">Shape.getFigureGenerators</a>.</p>
						<p>All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
							You can define your own named arrowheads by calling the static function <a href="Shape.html#static-defineArrowheadGeometry">Shape.defineArrowheadGeometry</a>.
						Get a <a href="Map.html">Map</a> of named arrowheads by calling the static function <a href="Shape.html#static-getArrowheadGeometries">Shape.getArrowheadGeometries</a>.</p>
						<p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.</p>
						<p>The Shape properties <a href="Shape.html#parameter1">parameter1</a>, and <a href="Shape.html#parameter2">parameter2</a> determine details of the
							construction of some <a href="Shape.html#figure">figure</a> geometries.
							Specifically, they often set the <a href="Shape.html#spot1">spot1</a>, <a href="Shape.html#spot2">spot2</a> for the Shape.
							These spots determine the &quot;inner area&quot; of an Auto panel when a Shape is the main object.
						See the <a href="../../intro/panels.html">Auto Panels section of the Panels Introduction page</a> for more details.</p>
						<p>Shapes use their geometric bounds when determining hit testing,
						but use rectangular bounds when participating in (panel) layouts.</p>
				</div>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Constructors</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"><a href="Shape.html#constructor" class="tsd-kind-icon">constructor</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Properties</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#figure" class="tsd-kind-icon">figure</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#fill" class="tsd-kind-icon">fill</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#fromArrow" class="tsd-kind-icon">from<wbr>Arrow</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometry" class="tsd-kind-icon">geometry</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometryStretch" class="tsd-kind-icon">geometry<wbr>Stretch</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#geometryString" class="tsd-kind-icon">geometry<wbr>String</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedEnd" class="tsd-kind-icon">graduated<wbr>End</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedSkip" class="tsd-kind-icon">graduated<wbr>Skip</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#graduatedStart" class="tsd-kind-icon">graduated<wbr>Start</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#interval" class="tsd-kind-icon">interval</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#isGeometryPositioned" class="tsd-kind-icon">is<wbr>Geometry<wbr>Positioned</a></li>
								<li class="tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite"><a href="Shape.html#naturalBounds" class="tsd-kind-icon">natural<wbr>Bounds</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#parameter1" class="tsd-kind-icon">parameter1</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#parameter2" class="tsd-kind-icon">parameter2</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#pathPattern" class="tsd-kind-icon">path<wbr>Pattern</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#spot1" class="tsd-kind-icon">spot1</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#spot2" class="tsd-kind-icon">spot2</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#stroke" class="tsd-kind-icon">stroke</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeCap" class="tsd-kind-icon">stroke<wbr>Cap</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeDashArray" class="tsd-kind-icon">stroke<wbr>Dash<wbr>Array</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeDashOffset" class="tsd-kind-icon">stroke<wbr>Dash<wbr>Offset</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeJoin" class="tsd-kind-icon">stroke<wbr>Join</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeMiterLimit" class="tsd-kind-icon">stroke<wbr>Miter<wbr>Limit</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#strokeWidth" class="tsd-kind-icon">stroke<wbr>Width</a></li>
								<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Shape.html#toArrow" class="tsd-kind-icon">to<wbr>Arrow</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-defineArrowheadGeometry" class="tsd-kind-icon">define<wbr>Arrowhead<wbr>Geometry</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-defineFigureGenerator" class="tsd-kind-icon">define<wbr>Figure<wbr>Generator</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-getArrowheadGeometries" class="tsd-kind-icon">get<wbr>Arrowhead<wbr>Geometries</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Shape.html#static-getFigureGenerators" class="tsd-kind-icon">get<wbr>Figure<wbr>Generators</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Constructors</h2>
				<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
					<a name="constructor" class="tsd-anchor"></a>
					<h3>
						constructor
					</h3>
					<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
						<li class="tsd-signature tsd-kind-icon">new <wbr>Shape<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>A newly constructed <a href="Shape.html">Shape</a> has a default <a href="Shape.html#figure">figure</a> of &quot;None&quot;,
								which constructs a rectangular geometry, and is filled and stroked with a black brush.</p>
							</div>
							<h4 class="tsd-returns-title">Returns <a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a></h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Properties</h2>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="figure" class="tsd-anchor"></a>
					<h3>
						figure
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the figure name, used to construct a <a href="Geometry.html">Geometry</a>.
								The value must be a string. The default value is &quot;None&quot;.</p>
								<p>The name can be any case but will always be canonicalized when set. For instance,
									setting &quot;roundedrectangle&quot; will set the value of figure to &quot;RoundedRectangle&quot;.
								All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.</p>
								<p>At most one of the following three properties may be set to a non-&quot;None&quot; value at the same time on the same shape:
								<a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, <a href="Shape.html#fromArrow">fromArrow</a>.</p>
								<p>You can define your own named figures by calling the static function <a href="Shape.html#static-defineFigureGenerator">Shape.defineFigureGenerator</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="fill" class="tsd-anchor"></a>
					<h3>
						fill
					<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type" data-tsd-kind="Type alias">BrushLike</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the <a href="Brush.html">Brush</a> or string that describes how the geometry is filled when drawn.</p>
								<p>The default value is &quot;black&quot;, causing the shape to be filled with solid black.
									Any valid CSS string can specify a solid color, and the <a href="Brush.html">Brush</a>
									class can be used to specify a gradient or pattern.
									A null fill will mean no fill is drawn and the filled portion
									of the Shape will not be pickable.
									A &quot;transparent&quot; fill is useful when wanting to allow a shape to be pickable
									without obscuring any other objects behind it.
									More information about the syntax of CSS color strings is available at:
								<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</p>
								<p>The geometry is filled before the <a href="Shape.html#stroke">stroke</a> is drawn.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="fromArrow" class="tsd-anchor"></a>
					<h3>
						from<wbr>Arrow
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the name of the kind of arrowhead that this shape should take
									when this shape is an element of a <a href="Link.html">Link</a>.
									Value must be a string.
								For bi-directional links the arrowhead name often starts with &quot;Backward...&quot;.</p>
								<p>The default is &quot;None&quot;, which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle.
									If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind
									the <a href="GraphObject.html#visible">GraphObject.visible</a> property, or you can set or bind this &quot;toArrow&quot; property to
									be the empty string.
								The arrowhead named &quot;&quot;, an empty string, will display as nothing.</p>
								<p>The name can be any case but will always be canonicalized when set. For instance,
									setting &quot;opentriangle&quot; will set the value of the arrowhead to &quot;OpenTriangle&quot;.
								All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.</p>
								<p>Setting this property may also set the <a href="GraphObject.html#segmentIndex">GraphObject.segmentIndex</a>,
									<a href="GraphObject.html#segmentOrientation">GraphObject.segmentOrientation</a>, and <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a> properties.
								This shape should be an element of a <a href="Link.html">Link</a>.</p>
								<p>At most one of the following three properties may be set to a non-&quot;None&quot; value at the same time on the same shape:
								<a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, <a href="Shape.html#fromArrow">fromArrow</a>.</p>
								<p>You can define your own named arrowheads by calling the static function <a href="Shape.html#static-defineArrowheadGeometry">Shape.defineArrowheadGeometry</a>.</p>
								<p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="geometry" class="tsd-anchor"></a>
					<h3>
						geometry
					<span class="tsd-signature-symbol">: </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the Shape&#39;s <a href="Geometry.html">Geometry</a> that defines the Shape&#39;s figure.
									Setting a geometry is not necessary if a <a href="Shape.html#figure">figure</a> is specified,
								as that will construct a geometry instead.</p>
								<p>Setting this geometry property will freeze the supplied Geometry.</p>
								<p>Setting this geometry property always overrides any set figure.
								The default value is null.</p>
								<dl class="tsd-comment-tags">
									<dt>see</dt>
									<dd><p><a href="Shape.html#geometryString">geometryString</a></p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="geometryStretch" class="tsd-anchor"></a>
					<h3>
						geometry<wbr>Stretch
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">EnumValue</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets how the shape&#39;s geometry is proportionally created given its computed size.
									Possible values are <a href="GraphObject.html#static-None">GraphObject.None</a>, <a href="GraphObject.html#static-Fill">GraphObject.Fill</a>, <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>, and <a href="GraphObject.html#static-Default">GraphObject.Default</a>.
									The default is <a href="GraphObject.html#static-Default">GraphObject.Default</a>, which resolves to <a href="GraphObject.html#static-Fill">GraphObject.Fill</a> for most figures, though
								some regular figures such as &quot;Circle&quot; and &quot;Square&quot; default to <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="geometryString" class="tsd-anchor"></a>
					<h3>
						geometry<wbr>String
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>When set, creates a <a href="Geometry.html">Geometry</a> and normalizes it from a given path string,
									then sets the <a href="Shape.html#geometry">geometry</a> property on this Shape and
									set the <a href="GraphObject.html#position">GraphObject.position</a> to the amount computed by normalization.
									The property getter simply returns the toString value of the <a href="Shape.html#geometry">geometry</a>,
								or the empty string if there is no Geometry value.</p>
								<p>See the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page</a> for examples.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.1</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="graduatedEnd" class="tsd-anchor"></a>
					<h3>
						graduated<wbr>End
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the fractional distance along the main shape of a &quot;Graduated&quot; <a href="Panel.html">Panel</a> at which this kind of tick should end.
								The default is 1. Any new value should range from 0 to 1.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.7</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="graduatedSkip" class="tsd-anchor"></a>
					<h3>
						graduated<wbr>Skip
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>val<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><span class="tsd-signature-type">boolean</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the function to determine which values along a &quot;Graduated&quot; <a href="Panel.html">Panel</a> will be skipped.
								The default is null and doesn&#39;t skip any ticks.</p>
								<p>The function takes a number argument, a value between <a href="Panel.html#graduatedMin">Panel.graduatedMin</a> and <a href="Panel.html#graduatedMax">Panel.graduatedMax</a>.
								The function will return a boolean, whether the tick will be skipped at the value of the argument.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>2.0</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="graduatedStart" class="tsd-anchor"></a>
					<h3>
						graduated<wbr>Start
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the fractional distance along the main shape of a &quot;Graduated&quot; <a href="Panel.html">Panel</a> at which this kind of tick should start.
								The default is 0. Any new value should range from 0 to 1.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.7</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="interval" class="tsd-anchor"></a>
					<h3>
						interval
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets how frequently this shape should be drawn within a &quot;Grid&quot; or &quot;Graduated&quot; <a href="Panel.html">Panel</a>,
									in multiples of the <a href="Panel.html#gridCellSize">Panel.gridCellSize</a> or <a href="Panel.html#graduatedTickUnit">Panel.graduatedTickUnit</a>.
								The default is 1.  Any new value must be a positive integer.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="isGeometryPositioned" class="tsd-anchor"></a>
					<h3>
						is<wbr>Geometry<wbr>Positioned
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the whether the <a href="GraphObject.html#position">GraphObject.position</a> of this shape denotes
									the top-left corner of this shape in panel coordinates or the origin of this geometry&#39;s coordinate system.
									Basically, this determines whether the <a href="Shape.html#strokeWidth">strokeWidth</a> affects the rendered location.
									A true value allows multiple shapes to be positioned precisely in a &quot;Position&quot; Panel independent of the stroke width.
								The default is false.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.1</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite">
					<a name="naturalBounds" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagOverride">Override</span>
						<span class="tsd-flag ts-flagReadOnly">Read-only</span>
						natural<wbr>Bounds
					<span class="tsd-signature-symbol">: </span><a href="Rect.html" class="tsd-signature-type" data-tsd-kind="Class">Rect</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This read-only property returns the natural bounds of this Shape as determined by its <a href="Shape.html#geometry">geometry</a>&#39;s bounds.
									The bounds will always include the (0,0) point.
									If the <a href="GraphObject.html#desiredSize">desiredSize</a> is set, it returns a <a href="Rect.html">Rect</a> with the <a href="GraphObject.html#desiredSize">desiredSize</a>. If no geometry is available,
								and no <a href="GraphObject.html#desiredSize">desiredSize</a> is set, this may have NaN values for the width and height.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="parameter1" class="tsd-anchor"></a>
					<h3>
						parameter1
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets a property for parameterizing the construction of a <a href="Geometry.html">Geometry</a> from a figure.
									The meaning of this property depends on the particular figure.
								The value must be a number; the default value is NaN.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="parameter2" class="tsd-anchor"></a>
					<h3>
						parameter2
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets a property for parameterizing the construction of a <a href="Geometry.html">Geometry</a> from a figure.
									The meaning of this property depends on the particular figure.
								The value must be a number; the default value is NaN.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="pathPattern" class="tsd-anchor"></a>
					<h3>
						path<wbr>Pattern
					<span class="tsd-signature-symbol">: </span><a href="GraphObject.html" class="tsd-signature-type" data-tsd-kind="Class">GraphObject</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets a <a href="GraphObject.html">GraphObject</a> that is drawn repeatedly along the path of the stroke of this shape.
									This property may be set to a shared GraphObject; the GraphObject should not belong to any Panel.
									Note that data bindings do <em>not</em> work in such shared GraphObjects, because they are not part of the visual tree.
								The default value is null, causing no object to be drawn repeatedly.</p>
								<p>Typically the object is a small <a href="Shape.html">Shape</a> or a <a href="Picture.html">Picture</a>.
									The larger the object is the worse the results will be, especially if the stroke has short segments or sharp curves.
								The pathPattern object is not part of the measured bounds of the Shape, it is a cosmetic element only.</p>
								<p>The stroke is always drawn normally -- having a value for this property will draw the value along the stroke as well,
									so it is commonplace to set the <a href="Shape.html#stroke">stroke</a> to &quot;transparent&quot; and the <a href="Shape.html#strokeWidth">strokeWidth</a> to be as wide as
								the height of the GraphObject being drawn along the stroke.</p>
								<p>Examples of path patterns can be seen in the <a href="../../samples/relationships.html">Relationships sample</a>.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.6</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="spot1" class="tsd-anchor"></a>
					<h3>
						spot1
					<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the top-left Spot used by some <a href="Panel.html">Panel</a>s for determining where in the shape other objects may be placed.
								The value is normally <a href="Spot.html#static-Default">Spot.Default</a>, but you may want to set it to override the value that many <a href="Shape.html#figure">figure</a>s use.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="spot2" class="tsd-anchor"></a>
					<h3>
						spot2
					<span class="tsd-signature-symbol">: </span><a href="Spot.html" class="tsd-signature-type" data-tsd-kind="Class">Spot</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the bottom-right Spot used by some <a href="Panel.html">Panel</a>s for determining where in the shape other objects may be placed.
								The value is normally <a href="Spot.html#static-Default">Spot.Default</a>, but you may want to set it to override the value that many <a href="Shape.html#figure">figure</a>s use.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="stroke" class="tsd-anchor"></a>
					<h3>
						stroke
					<span class="tsd-signature-symbol">: </span><a href="../index.html#BrushLike" class="tsd-signature-type" data-tsd-kind="Type alias">BrushLike</a>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the <a href="Brush.html">Brush</a> or string that describes how the geometry is drawn as if by a pen.</p>
								<p>The default value is &quot;black&quot;, causing the shape to be outlined in black.
									Any valid CSS string can specify a solid color, and the <a href="Brush.html">Brush</a>
									class can be used to specify a gradient or pattern.
									A null stroke will mean no stroke is drawn.
									A &quot;transparent&quot; stroke is useful when wanting to allow a shape to be pickable
									without obscuring any other objects behind it.
									More information about the syntax of CSS color strings is available at:
								<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</p>
								<p>The stroke is drawn after the geometry is filled with the <a href="Shape.html#fill">fill</a> Brush.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeCap" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Cap
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">&quot;butt&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;round&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;square&quot;</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the style for how the ends of the stroke&#39;s line are drawn.
								The value must be one of &quot;butt&quot;, &quot;round&quot;, or &quot;square&quot;. The default is &quot;butt&quot;.</p>
								<p>For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linecap">Stroke Line Cap (w3.org)</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeDashArray" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Dash<wbr>Array
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">[]</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the dash array for creating dashed or dotted lines.
									The value must be an array of positive numbers and zeroes,
									or else null to indicate a solid line.
									For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
								For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-setlinedash">Stroke Line Dash Array (w3.org)</a>.</p>
								<p>The default value is null, resulting in a line without dashes or dots.
								Setting an array with all zeroes will set the value to null.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.1</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeDashOffset" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Dash<wbr>Offset
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the offset for dashed lines, used to start the drawing of the dash pattern with some space.
								The value must be a real non-negative number. The default is zero.</p>
								<p>For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linedashoffset">Stroke Line Dash Offset (w3.org)</a>.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.1</p>
									</dd>
								</dl>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeJoin" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Join
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">&quot;round&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;bevel&quot;</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">&quot;miter&quot;</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the type of corner that will be drawn for a stroke at the intersection of two straight segments of the geometry.
								The value must be one of &quot;miter&quot;, &quot;bevel&quot;, or &quot;round&quot;. The default is &quot;miter&quot;.</p>
								<p>For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-linejoin">Stroke Line Join (w3.org)</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeMiterLimit" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Miter<wbr>Limit
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the style for the stroke&#39;s mitre limit ratio.
									The value must be a real number greater than or equal to one.
								The default is 10.0.</p>
								<p>For more information, see <a href="https://www.w3.org/TR/2dcontext/#dom-context-2d-miterlimit">Stroke Miter Limit (w3.org)</a>.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="strokeWidth" class="tsd-anchor"></a>
					<h3>
						stroke<wbr>Width
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the thickness of the stroke&#39;s pen.</p>
								<p>Value must be a real number greater than or equal to zero.
								The default value is 1.0.</p>
								<p>A value of zero will cause the stroke not to be drawn.
									However, Main Shapes of Link Selection Adornments with a strokeWidth of 0
								will inherit the strokeWidth from the Link&#39;s main Shape.</p>
								<p>The stroke width will affect the <a href="GraphObject.html#measuredBounds">GraphObject.measuredBounds</a> and <a href="GraphObject.html#actualBounds">GraphObject.actualBounds</a> of this shape.
								The stroke is drawn centered on the path of the geometry.</p>
							</div>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
					<a name="toArrow" class="tsd-anchor"></a>
					<h3>
						to<wbr>Arrow
					<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>        </h3>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>Gets or sets the name of the kind of arrowhead that this shape should take
									when this shape is an element of a <a href="Link.html">Link</a>.
								Value must be a string.</p>
								<p>The default is &quot;None&quot;, which means that this Shape is not an arrowhead, causing it to be the default Shape, a large filled Rectangle.
									If you want to have an arrowhead Shape but sometimes not show an arrowhead, you can set or bind
									the <a href="GraphObject.html#visible">GraphObject.visible</a> property, or you can set or bind this &quot;toArrow&quot; property to
									be the empty string.
								The arrowhead named &quot;&quot;, an empty string, will display as nothing.</p>
								<p>The name can be any case but will always be canonicalized when set. For instance,
									setting &quot;opentriangle&quot; will set the value of the arrowhead to &quot;OpenTriangle&quot;.
								All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.</p>
								<p>Setting this property may also set the <a href="GraphObject.html#segmentIndex">GraphObject.segmentIndex</a>,
									<a href="GraphObject.html#segmentOrientation">GraphObject.segmentOrientation</a>, and <a href="GraphObject.html#alignmentFocus">GraphObject.alignmentFocus</a> properties.
								This shape should be an element of a <a href="Link.html">Link</a>.</p>
								<p>At most one of the following three properties may be set to a non-&quot;None&quot; value at the same time on the same shape:
								<a href="Shape.html#figure">figure</a>, <a href="Shape.html#toArrow">toArrow</a>, <a href="Shape.html#fromArrow">fromArrow</a>.</p>
								<p>You can define your own named arrowheads by calling the static function <a href="Shape.html#static-defineArrowheadGeometry">Shape.defineArrowheadGeometry</a>.</p>
								<p>You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.</p>
							</div>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
					<a name="static-defineArrowheadGeometry" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						define<wbr>Arrowhead<wbr>Geometry
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
						<li class="tsd-signature tsd-kind-icon">define<wbr>Arrowhead<wbr>Geometry<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, pathstr<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This static function defines a named arrowhead geometry.
								Once this is called one can use the name as a value for <a href="Shape.html#toArrow">Shape.toArrow</a> or <a href="Shape.html#fromArrow">Shape.fromArrow</a>.</p>
								<p>The first argument is the new arrowhead name and must be a non-empty string that starts with a capital letter and that is not &quot;None&quot;.</p>
								<p>If the second argument is a string, it is converted into a <a href="Geometry.html">Geometry</a> by calling
									<code>go.Geometry.parse(pathstr, false)</code>,
								which may throw an error if there are problems with the syntax of the string.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.5</p>
									</dd>
								</dl>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>name: <span class="tsd-signature-type">string</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>a capitalized arrowhead name (&quot;OpenTriangle&quot;); must not be &quot;&quot; or &quot;None&quot;</p>
									</div>
								</li>
								<li>
									<h5>pathstr: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a></h5>
									<div class="tsd-comment tsd-typography">
										<p>a <a href="Geometry.html">Geometry</a> or a Geometry path string, e.g. &quot;m 0,0 l 8,4 -8,4&quot;</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
					<a name="static-defineFigureGenerator" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						define<wbr>Figure<wbr>Generator
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
						<li class="tsd-signature tsd-kind-icon">define<wbr>Figure<wbr>Generator<span class="tsd-signature-symbol">(</span>name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, func<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>shape<span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This static function defines a named figure geometry generator for Shapes.
								Once this is called one can use the name as a value for <a href="Shape.html#figure">Shape.figure</a>.</p>
								<p>The first argument is the new figure name and must be a non-empty string that starts with a capital letter and that is not &quot;None&quot;.</p>
								<p>If the second argument is a string this call defines a synonym for an existing figure generator.
								Do not define cycles of synonyms -- the behavior will be undefined.</p>
								<p>If the second argument is a function,
									the <a href="Geometry.html">Geometry</a> generator function&#39;s first argument is the <a href="Shape.html">Shape</a> for which the function is producing a Geometry.
									But this Shape argument may be null in some circumstances.
									The second and third arguments are the desired width and height.
									These will always be finite non-negative numbers.
									The function may look at the <a href="Shape.html#parameter1">Shape.parameter1</a> and <a href="Shape.html#parameter2">Shape.parameter2</a> properties, which may be NaN,
								to decide what geometry to create for the figure given its intended width and height.</p>
								<p>The function must return a Geometry; you may want to set <a href="Geometry.html#spot1">Geometry.spot1</a> and <a href="Geometry.html#spot2">Geometry.spot2</a> on it
									to indicate where content should be placed within the figure when using an &quot;Auto&quot; Panel.
									For some figures you may also want to set <a href="Geometry.html#defaultStretch">Geometry.defaultStretch</a> to <a href="GraphObject.html#static-Uniform">GraphObject.Uniform</a>
								in order to maintain the geometry&#39;s aspect ratio within the Shape.</p>
								<p>Generated figures must create a Geometry that is not larger than the supplied with and height. Doing so will signal an error.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.5</p>
									</dd>
								</dl>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>name: <span class="tsd-signature-type">string</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>a capitalized figure name (&quot;RoundedRectangle&quot;); must not be &quot;&quot; or &quot;None&quot;</p>
									</div>
								</li>
								<li>
									<h5>func: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>shape<span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a>, width<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, height<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">)</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>A function that takes (Shape,width,height) and returns a Geometry,
										or an existing figure generator name for which the new name will be a synonym.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
					<a name="static-getArrowheadGeometries" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						get<wbr>Arrowhead<wbr>Geometries
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Arrowhead<wbr>Geometries<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">&gt;</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This static function returns a read-only Map of named arrowhead geometries.
									The keys are arrowhead names.
								The values are <a href="Geometry.html">Geometry</a> objects.</p>
								<p>The predefined arrowheads can be seen in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.5</p>
									</dd>
								</dl>
							</div>
							<h4 class="tsd-returns-title">Returns <a href="Map.html" class="tsd-signature-type" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">&gt;</span></h4>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class tsd-is-static">
					<a name="static-getFigureGenerators" class="tsd-anchor"></a>
					<h3>
						<span class="tsd-flag ts-flagStatic">Static</span>
						get<wbr>Figure<wbr>Generators
					</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class tsd-is-static">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Figure<wbr>Generators<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Map.html" class="tsd-signature-type" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a>, b<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, c<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">&gt;</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<p>This static function returns a read-only Map of named geometry generators.
									The keys are figure names.
									The values are either string synonyms for other figure names, or functions
								that take a <a href="Shape.html">Shape</a> and a width and a height and return a <a href="Geometry.html">Geometry</a>.</p>
								<p>The predefined shape figures can be seen in the <a href="../../samples/shapes.html">Shapes sample</a>.</p>
								<dl class="tsd-comment-tags">
									<dt>since</dt>
									<dd><p>1.5</p>
									</dd>
								</dl>
							</div>
							<h4 class="tsd-returns-title">Returns <a href="Map.html" class="tsd-signature-type" data-tsd-kind="Class">Map</a><span class="tsd-signature-symbol">&lt;</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">, </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="Shape.html" class="tsd-signature-type" data-tsd-kind="Class">Shape</a>, b<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span>, c<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> =&gt; </span><a href="Geometry.html" class="tsd-signature-type" data-tsd-kind="Class">Geometry</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">&gt;</span></h4>
						</li>
					</ul>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class=" ">
						<a href="../index.html">GoJS <wbr>Class <wbr>Index</a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class">
						<a href="Shape.html" class="tsd-kind-icon">Shape</a>
						<ul>
							<li class=" tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite">
								<a href="Shape.html#constructor" class="tsd-kind-icon">constructor</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#figure" class="tsd-kind-icon">figure</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#fill" class="tsd-kind-icon">fill</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#fromArrow" class="tsd-kind-icon">from<wbr>Arrow</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#geometry" class="tsd-kind-icon">geometry</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#geometryStretch" class="tsd-kind-icon">geometry<wbr>Stretch</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#geometryString" class="tsd-kind-icon">geometry<wbr>String</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#graduatedEnd" class="tsd-kind-icon">graduated<wbr>End</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#graduatedSkip" class="tsd-kind-icon">graduated<wbr>Skip</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#graduatedStart" class="tsd-kind-icon">graduated<wbr>Start</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#interval" class="tsd-kind-icon">interval</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#isGeometryPositioned" class="tsd-kind-icon">is<wbr>Geometry<wbr>Positioned</a>
							</li>
							<li class=" tsd-kind-get-signature tsd-parent-kind-class tsd-is-overwrite">
								<a href="Shape.html#naturalBounds" class="tsd-kind-icon">natural<wbr>Bounds</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#parameter1" class="tsd-kind-icon">parameter1</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#parameter2" class="tsd-kind-icon">parameter2</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#pathPattern" class="tsd-kind-icon">path<wbr>Pattern</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#spot1" class="tsd-kind-icon">spot1</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#spot2" class="tsd-kind-icon">spot2</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#stroke" class="tsd-kind-icon">stroke</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeCap" class="tsd-kind-icon">stroke<wbr>Cap</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeDashArray" class="tsd-kind-icon">stroke<wbr>Dash<wbr>Array</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeDashOffset" class="tsd-kind-icon">stroke<wbr>Dash<wbr>Offset</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeJoin" class="tsd-kind-icon">stroke<wbr>Join</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeMiterLimit" class="tsd-kind-icon">stroke<wbr>Miter<wbr>Limit</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#strokeWidth" class="tsd-kind-icon">stroke<wbr>Width</a>
							</li>
							<li class=" tsd-kind-accessor tsd-parent-kind-class">
								<a href="Shape.html#toArrow" class="tsd-kind-icon">to<wbr>Arrow</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
								<a href="Shape.html#static-defineArrowheadGeometry" class="tsd-kind-icon">define<wbr>Arrowhead<wbr>Geometry</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
								<a href="Shape.html#static-defineFigureGenerator" class="tsd-kind-icon">define<wbr>Figure<wbr>Generator</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
								<a href="Shape.html#static-getArrowheadGeometries" class="tsd-kind-icon">get<wbr>Arrowhead<wbr>Geometries</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class tsd-is-static">
								<a href="Shape.html#static-getFigureGenerators" class="tsd-kind-icon">get<wbr>Figure<wbr>Generators</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
				</ul>
			</nav>
		</div>
	</div>
</div>
<div class="tsd w-full max-w-screen-xl mx-auto px-2">
	<div class="bottom-copyright">Copyright &copy; 1998-2021 by Northwoods Software Corporation.</div>
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date()); gtag('config', 'UA-1506307-5');
  var getOutboundLink = function(url, label) {
    gtag('event', 'click', {
      'event_category': 'outbound',
      'event_label': label,
      'transport_type': 'beacon'
    });
  }

  // topnav
  var topButton = document.getElementById("topnavButton");
  var topnavList = document.getElementById("topnavList");
  topButton.addEventListener("click", function() {
    this.classList.toggle("active");
    topnavList.classList.toggle("hidden");
    document.getElementById("topnavOpen").classList.toggle("hidden");
    document.getElementById("topnavClosed").classList.toggle("hidden");
  });
</script>
</body>
</html>